﻿<div ng-controller="GovernanceIssuesController as ctrl">
    <div class="border-spacer">Corporate Governance Overall Scores</div>
    <div class="row-fluid">
        <div class="col-md-4">
            <div class="sidebar-table-left no-border">
                <div class="green-number-bubble">
                    {{ ctrl.overalPerformance.score | number: 0 }}
                </div>
            </div>
            <div class="sidebar-table-right no-border" style="width: auto;">
                <div class="title-black-border">Corporate Governance Score</div>
                {{ctrl.companyAssesment}}
            </div>
            <div class="clear">&nbsp;</div>
        </div>

        <div class="col-md-4">
            <div class="sidebar-table-left no-border">
                <div class="green-number-bubble" style="background-color: #FEAE17">
                    {{ ctrl.overalPerformance.regionalPercentile | number: 0 }}<sup style="font-size: 11px; top: -14px;">{{ctrl.regionalPercentileOrdinal}}</sup>
                </div>
            </div>
            <div class="sidebar-table-right no-border" style="width: auto;">
                <div class="title-black-border">Regional Percentile</div>
                {{ctrl.overalPerformance.region}}
            </div>
            <div class="clear">&nbsp;</div>
        </div>

        <div class="col-md-4" ng-if="ctrl.govProfile.companyGovernanceProfile.fullProfile">
            <div>
                <div class="sidebar-table-left no-border">
                    <div class="trend-arow-large trend-arow-{{ ctrl.overalPerformance.outlook }}"></div>
                </div>
                <div class="sidebar-table-right no-border" style="width: auto;">
                    <div class="title-black-border">
                        Outlook
                    </div>
                    {{ ctrl.outlookAssement }}

                </div>
            </div>
        </div>
        <div class="clear">&nbsp;</div>
        <div ng-repeat="companyIssues in ctrl.issues">
            <div id="{{companyIssues.companyIndicators[0].issueName}}" class="border-spacer">{{companyIssues.issue.name}}</div>
            <div style="width: 100%" ng-if="ctrl.govProfile.companyGovernanceProfile.fullProfile" ng-bind-html="companyIssues.issue.comment"></div>
            <br />
            <div class="row-fluid ng-scope">
                <div class="col-md-3">
                    <div class="sidebar-table-left no-border" style="width: 80px;">
                        <div class="green-number-bubble">
                            {{ companyIssues.issue.score | number: 0 }}
                        </div>
                    </div>
                    <div class="sidebar-table-right no-border" style="width: 120px;">
                        <div class="title-black-border no-border ng-binding" style="padding-top: 25px;">Score</div>
                    </div>
                    <div class="clear">&nbsp;</div>
                    <div class="" ng-if="ctrl.govProfile.companyGovernanceProfile.fullProfile">
                        <div class="sidebar-table-left no-border" style="width: 80px;">
                            <div class="trend-arow-large trend-arow-{{ companyIssues.issue.outlook }}" style="background-size: 70px; margin-left: -5px;"></></div>
                        </div>
                        <div class="sidebar-table-right no-border" style="width: 130px; padding-top: 20px;">
                            <!--<div class="title-black-border">
                                Outlook
                            </div>
                            <ul class="esg-ratings_black">
                                <li class="ng-binding">Neutral</li>
                            </ul>-->
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="col-md-9">
                    <div>
                        <div class="table-2" style="margin-top: 9px;">
                            <div class="table-row-2">
                                <div class="table-cell-head-2 width_90p">Indicator</div>
                                <div class="table-cell-head-2 width_10p" style="text-align: right;">Score</div>
                            </div>
                            <div class="table-row-2" ng-repeat="indicator in companyIssues.companyIndicators">
                                <div class="table-cell-2 width_90p">
                                    <a href="" ng-click="ctrl.switchView(indicator)">{{indicator.number}} {{indicator.name}}</a>                                   
                                </div>
                                <div class="table-cell-2" style="text-align: right;">{{indicator.score}}</div>
                            </div>                            
                        </div>
                    </div>
                </div>
                <div class="clear">&nbsp;</div>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
    </div>
</div>